<html>
<head>
  <style>
  .area {
    border: 1px solid blue;
  }

  .general {
    padding: 1%; 
  }

  #chatarea {
    width: 25%;
    float: left;
    margin-right: 1%;
    height: 400px;
    position: absolute;
    background-color: #00f;
    opacity: 0.4;
    z-index: 2;
  } 
  #canvasarea {
    float: left;
    position: absolute;
    z-index: 1;
  } 

  #statusarea {
    width: 977px; 
    height: 20px;
    top: 480px;
    float: left;
    position: absolute;
  } 
  .buttonarea {
    position: absolute;
    left: 400px;
  } 

  #output {
    border: 1px solid blue;
    width: 100%;
    overflow: auto;
    height: 380px;
  }

  #canvas_id {
    border: 1px solid #ddd;
    cursor: pointer;
  }

</style>
</head>
<body>
<h3>iBoard</h3>  
<div id="chatarea" class="area general">
  <button id='btn0' onclick="connect();">connect</button>
  <span id='status'>NOT CONNECTED</span>
  <br>
  <div id="output"></div>
  <br>
  <div style="clear: both;"> </div>
</div>
<div id="canvasarea" class="area general">
  <canvas id="canvas_id" height=400 width=900></canvas>
  <br>
  <div class="buttonarea">
    <button id='reset_btn'>Reset</button>
    <button id='black_btn'>Pencil</button>
    <button id='erase_btn'>Erase</button>
    <button id='chat_btn'>Chat</button>
  </div>
  <!--
  -->
</div>
<!--
<div id="statusarea" class="area general">
  <div id="cursor"></div>
</div>
-->
</body>
</html>
